<template>
	<view class="card-list" v-for="item in dataList" :key="item.contractId">
		<view class="card-list-header">
			<wd-cell :title="item.title" title-width="175px" custom-class="card-list-cell">
				<view class="flex flex-between">
					<view class="font20">{{ item.submitTime }}</view>
					<wd-tag custom-class="space" type="primary" :color="colorList[item.status]"
						:bg-color="bgColorList[item.status]">
						{{ tagNameList[item.status] }}
					</wd-tag>
				</view>
			</wd-cell>
		</view>
		<wd-cell title="合同编号" :value="item.contractNo" />
		<wd-cell title="合同总金额" :value="item.totalAmount" />
		<view class="card-list-container"
			v-if="item.status === 3 && item.currentPayableAmount !== '0'&&item.currentPayableAmount !== null">
			<view class="amount-content">
				<view class="amount">￥{{ item.currentPayableAmount }}</view>
				<view>本期应付</view>
			</view>
			<view class="amount-content">
				<view class="amount">￥{{ item.paidAmount }}</view>
				<view>本期已付</view>
			</view>
		</view>
		<view class="card-list-footer">
			<div v-for="(button, i) in getVisibleButtons(item)" :key="button.text" style="display: flex"
				@click="button.action">
				<div>{{ button.text }}</div>
				<div class="divider-grey" :style="{
            margin: getVisibleButtons(item).length > 2 ? '0 60rpx' : '0 100rpx',
          }" v-if="i < getVisibleButtons(item).length - 1"></div>
			</div>
		</view>
	</view>
	<wd-status-tip tip="这里暂时什么都没有哦" v-if="dataList.length <= 0"
		image="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/empty.png" />
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		listContract,
		signContract
	} from "@/api/contract";

	const colorList = ref(["#FF9900", "#409EFF", "#409EFF", "#409EFF", "#909399"]);
	const bgColorList = ref([
		"#FFF0D9",
		"#D9EDFF",
		"#D9EDFF",
		"#D9EDFF",
		"#f4f4f5",
	]);
	const tagNameList = ref(["待生成", "审批中", "待签约", "已签约", "已作废"]);
	const dataList = ref(0);
	const signUrl = ref(null);
	const buttons = (row) => {
		return [{
				condition: () => row.status !== 4,
				text: "查看合同",
				action: () =>
					uni.navigateTo({
						url: "/pages/contractManage/contractDetails/index?contractId=" +
							row.contractId,
					}),
			},
			{
				condition: () => row.signingMethod === 2 && row.status === 2,
				text: "签约",
				action: () => handleDelete(row),
			},
			{
				condition: () => true,
				text: "查看付款计划",
				action: () => serchPlan(row),
			},
		];
	};
	//定义按钮
	const getVisibleButtons = (row) => {
		// 过滤可见按钮
		return buttons(row).filter((btn) => btn.condition());
	};
	//跳转收款计划
	const serchPlan = (row) => {
		const data = {
			contractNo: row.contractNo,
			currentPayableAmount: row.currentPayableAmount,
			paidAmount: row.paidAmount,
			title: row.title,
			status: row.status,
		};
		const jsonData = encodeURIComponent(JSON.stringify(data));
		uni.navigateTo({
			url: `/pages/contractManage/paymentPlan/index?data=${jsonData}`,
		});
	};
	const handleDelete = async (row) => {
		signUrl.value = null;
		const {
			data
		} = await signContract(row.contractNo);
		signUrl.value = data.signUrl;
		if (signUrl.value) {
			// 跳转
			let url = "https://smlt.esign.cn/isoMA6o";
			uni.navigateTo({
				url: "/pages/linkPage/linkPage?value=" + url,
			});
		}
	};
	const getList = async () => {
		const {
			data
		} = await listContract();
		dataList.value = data || [];
	};
	getList();
</script>

<style lang="scss" scoped>
	.card-list {
		background: #ffffff;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;

		&-header {
			border-bottom: 2rpx solid #f5f7fa;
			padding-bottom: 24rpx;
		}

		&-container {
			display: flex;
			justify-content: space-evenly;
			margin-bottom: 20rpx;

			.amount-content {
				width: 300rpx;
				height: 128rpx;
				background: #f6f8fa;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #86909c;

				.amount {
					color: #3d3d3d;
					margin-bottom: 10rpx;
				}
			}
		}

		&-footer {
			border-top: 2rpx solid #f5f7fa;
			padding: 24rpx;
			color: #007dff;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-content: center;

			.divider-grey {
				width: 4rpx;
				height: 40rpx;
				background: #e1e6ed;
			}
		}
	}
</style>